import React from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import './style.css';

@withRouter
class MyNavLink extends React.Component {
    state = {
        navlist: [
            { id: 1, name: 'home' },
            { id: 2, name: 'about' },
            { id: 3, name: 'topics' },
            { id: 4, name: 'profile' }
        ]
    }

    handleClick = (name) => {
        this.props.history.push({
            pathname: name
        });
    }
    render () {
        let pathname = this.props.location.pathname;
        return (
            <div>
                {
                    this.state.navlist.map(({ id, name }) => (
                        <li
                            key={id}
                            onClick={() => this.handleClick(name)}>
                            {pathname === '/' + name ? '>' : ''}
                            {name}
                        </li>
                    ))
                }
            </div>
        );
    }
}

const About = (props) => <div>About</div>;
const Home = withRouter((props) => {
    console.log(props);
    return <div><h2>Home</h2></div>;
});
const Topics = (props) => <div>Topics</div>;
const Profle = (props) => <div>Profle</div>;

class App extends React.Component {
    render () {
        return (
            <div>
                <MyNavLink />
                <hr />
                <Switch>
                    <Route exact path='/home' component={Home}></Route>
                    <Route path='/about' render={(props) => <About {...props}></About>}></Route>
                    <Route path='/topics' children={(props) => <Topics {...props}></Topics>}></Route>
                    <Route path="/profile">
                        <Profle></Profle>
                    </Route>
                </Switch>
            </div>
        );
    }
}

export default App;
